  <template>
  <div>
    <div class="ybody">
      <div class="Yhead1">
        <div class="yhead">
      <router-link to="DebitCard">  <img src="../assets/img/箭头.png" alt="" width="20px" height="20px" /></router-link>  
          <h3 class="details">借记卡详情</h3>
        </div>
        <div class="peacl">
          <div class="peaclHead">
            <p class="peacl1">I类</p>
            <p class="peacl2">{{ clip }}</p>
          </div>
          <div class="enroll">
            <ul>
              <li>
                注册渠道
                <p>网点注册</p>
              </li>
              <li>
                开户网点
                <p>{{ website }}</p>
              </li>
              <li>
                卡状态
                <p>{{ state }}</p>
              </li>
              <li>
                账户状态
                <p>{{ account }}</p>
              </li>
              <li>
                默认账户
                <p>是</p>
              </li>
            </ul>
          </div>
          <div class="peaclfoot">
            <ul>
              <li @click="lose">挂失</li>
              <li>改密</li>
              <li>密码解锁</li>
              <li @click="show = true">更多</li>
              <van-action-sheet
                v-model="show"
                :actions="actions"
                cancel-text="取消"
                close-on-click-action
                @cancel="onCancel"
                @select="sheetSelect"
              />
            </ul>
          </div>
        </div>
      </div>
      <div class="Rmb">
        <div class="RmbHead">
          <img src="../assets/img/国旗.png" alt="" width="20%" height="20%" />
          <p>人民币活期</p>
        </div>
        <div class="balance">
          <div>
            可用余额
            <p class="moneyY">￥{{ yuan }}</p>
          </div>
          <div>
            账户余额
            <p class="moneyY">￥{{ yuan }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import {ka} from "../api/Debitcarddetails"
export default {
  data() {
    return {
      clip: "6240**********6483",
      website: "",
      state: "",
      account: "",
      yuan: "0.00",
      show: false,
      actions: [
        { name: "别名编辑" },
        { name: "隐藏设置" },
        { name: "短信通知" },
        { name: "旧卡号查询" },
        { name: "借记卡降级" },
        { name: "销户" },
        { name: "附属卡管理" },
      ],
    };
  },
  methods: {
    lose() {
      this.$router.push({
        name: "ReportLoss",
        params: {
          clip: this.clip,
        },
      });
    },
    // 下拉框 销户
    onCancel() {
      Toast("取消");
    },
    sheetSelect(item) {
      // console.log(item.name);
      if (item.name == "销户") {
        this.$router.push({
        name: "CancellationY",
        params: {
          clip: this.clip,
        },
      });
      }
     
    },
    // 接口
    fun(){
        ka({card_id:this.clip}).then((res)=>{
          if (res.data[0]== 0) {
            this.state = "正常户";
            this.account = "正常户"
          }if(res.data[1] == 1001){
            this.website = "太原欣知路支行";
          }else if(res.code == 400){
            Dialog({ title: "温馨提示", message: res.msg });
          }        
          this.yuan = res.data[2];
        })
    }
  },
  created(){
    this.fun()
  }
};
</script>

<style scoped src="../assets/css/Debitcarddetails.css">
</style>